<template>
  <div class="fileList">
    <h2>一个项目用COOL就够了</h2>
    <div class="img">
      <img src="@/assets/img/doc_img.png" alt="" />
    </div>
    <div class="conter">
      <ul>
        <li>
          <h4>开源免费</h4>
          <p>
            COOL基础框架免费开源可商用，遵循MIT开源协议，源码开放无后门，安全保障。
          </p>
        </li>
        <li>
          <h4>全面覆盖</h4>
          <p>
            产品覆盖面广，涉及后端、移动端、桌面端等开发，几乎可以满足大部分的开发需求。
          </p>
        </li>
        <li>
          <h4>快速开发</h4>
          <p>
            每个产品都能大大提高软件研发速度，快速迭代，降低试错成本，提高市场竞争力。
          </p>
        </li>
      </ul>
    </div>
    <div class="title">
      <h3>开发交流</h3>
      <p>
        <span>COOL团队</span
        >是集互联网上的技术大牛，本着共同的爱好，收集广大程序员的开发诉求，不断开发能帮助程序员与企业快速开发迭代他们的软件产品。
      </p>
      <p>我们的主旨：<strong>让软件开发快一点</strong></p>
      <p>培养更多COOL的开发者</p>
      <p>如果你一样有这样的喜好，可以考虑加入我们成为我们当中的一员</p>
      <p><img src="@/assets/img/wechat.png" alt="" /></p>
    </div>
    <h6>
        <a href="#">
            Copyright © 2022 COOL | 粤ICP备2022012608号
        </a>
    </h6>
  </div>
</template>
<style lang="scss">
.fileList {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 580px;
  padding: 30px;
  h2 {
    margin: 50px auto;
    font-size: 40px;
  }
  .img {
    width: 1200px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: center;
    img {
      width: 900px;
      height: 520px;
    }
  }

  .conter {
    width: 100%;
    margin-top: 20px;
    ul {
      width: 100%;
      display: flex;
      justify-content: space-between;
      li {
        width: 30%;
        height: 165px;
        h4 {
          font-size: 25px;
          line-height: 2;
          font-weight: 500;
        }
        p {
          line-height: 30px;
          color: #4e6e8e;
        }
      }
    }
  }

  .title {
    width: 100%;
    border-bottom: 1px solid #ccc;
    h3 {
      width: 100%;
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
      font-size: 25px;
      margin-bottom: 20px;
    }
    p {
      line-height: 3;
      span {
        background-color: #f3f4f5;
        padding: 6px;
      }
      p {
        width: 260px;
      }
    }
  }

    h6 {
        height: 80px;
        a {
            line-height: 80px;
            color: #7fbbf5;
        }
    }
}
</style>
